<html lang="ch">
<head>
    <meta charset="utf8">
    <title>诗歌本</title>
<!--    <meta http-equiv="refresh" content="0;url=https://www.top237.top/index-bootstarp.html">-->
    <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no"/>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.6.0/cloudbase.full.js"></script>
    <script src="./cloudbase/cloudbase-login.js"></script>
    <script src="./cloudbase/cloudbase-api.js?a=1"></script>
    <link rel="stylesheet" href="js/bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="js/bootstrap-4.5.3-dist/js/bootstrap.bundle.js"></script>
    <script src="./js/wxSDK.js?type=222"></script>
    <link rel="stylesheet" type="text/css" href="css/public.css?type=1">
    <link rel="stylesheet" type="text/css" href="css/index.css?type=18">
    <script type="text/javascript" src="layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link id="zhandianIcon" rel="shortcut icon" href="https://7372-srrz-2g24l1oea7a7e67e-1304952114.tcb.qcloud.la/icon/%E7%81%AF%E5%A1%94.png" >
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2499920_vztvntybjy.css">
    <link rel="stylesheet" href="./mescroll/mescroll.min.css">
    <script src="./mescroll/mescroll.min.js" charset="utf-8"></script>
    <style>
        .mescroll{
            position: fixed;
            top: 120px;
            bottom: 40px;
            height: auto;/*如设置bottom:50px,则需height:auto才能生效*/
        }
        .mescroll-totop {
            bottom: 40px;
        }
        .layui-layer-demo{

            background-color: transparent;
            border-radius: 20px;

        }
    </style>
</head>
<body>
<!-- 头部区域 begin    -->

<header class="header">
    <div class="container pt-3" role="searchbox">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text iconfont icon-sousuo" id="basic-addon1"></span>
            </div>
            <label for="seacherInput" class="sr-only">搜索</label>
            <input id="seacherInput" type="text" class="form-control" placeholder="诗集名称或序号" aria-label="搜索框"
                   oninput="SGB.seacher(event.target.value)">
            <span id="ariaSeacher" aria-label="seacherRes" tabindex="0" class="sr-only sr-only-focusable"></span>
            <div style="display: none;" role="button" aria-label="清空搜索字符" tabindex="0" class="removeSeacher" onclick="SGB.removeSeacher()"></div>

        </div>
    </div>
    <div class="container" role="navigation">
        <nav class="navbar-box">
            <ul>

            </ul>
        </nav>
    </div>
</header>

<!--头部区域 end->

<!-主体列表List页 begin-->
<main class="mescroll main container" id="mescroll">
    <ul class="list-group"></ul>
</main>

<!--主体列表List页 end-->
<footer class="footer container" style="background-color: #007bff;display: flex;justify-content: space-around;">

                <div class="btn-group dropup">
                    <button id="meun" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" aria-label="菜单">
                        <small>我的24&nbsp&nbsp&nbsp&nbsp现场24&nbsp&nbsp&nbsp&nbspCH24</small>
                        <span id="gdCount"  class="gdCount badge badge-pill badge-danger" style="display: none">1</span>
                        <span class="badge badge-pill badge-danger" >公测</span>
                    </button>
                    <div class="dropdown-menu">
                        <a href="https://aa-6ggh2yqz5d3fe43a-1306391227.tcloudbaseapp.com"  onclick="" class="dropdown-item" aria-label="新版公测">
                            新版公测
                            <span class="badge badge-pill badge-danger" aria-valuenow='0' aria-label="新版公测" aria-live="assertive">00</span>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a href="#" id="gdFx" onclick="SGB.bodanForm(event)" class="dropdown-item" aria-label="我的播单">
                            我的播单
                            <span id="bdCount"  class="badge badge-pill badge-danger" style="display: none;" aria-hidden="true" aria-valuenow='0' aria-label="这是播单选择条目的计数器，显示当前加了几首赞美" aria-live="assertive">0</span>
                        </a>
                        <!-- https://srrz-2g24l1oea7a7e67e-1304952114.tcloudbaseapp.com/sgb2.0/hd.html  旧路径-->
                        <a class="dropdown-item" href="./hd.html">
                            花园花朵
                        </a>
                        <a class="dropdown-item" href="./HistoricalVersion.html">
                            版本更新记录
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="./moxiang.html">
                            默想房间
                        </a>
                    </div>
                </div>
                <a style="color:#fff;font-size:8px;" href="https://beian.miit.gov.cn" target="_blank">www.top237.top 京ICP备2021022096号</a>

<!--            <div class="col" id="headimgurl" hidden aria-hidden="true">-->

<!--    			<img id="shoquan" role="button" tabindex="0" class="float-right rounded-circle headimgurl" src="https://srrz-2g24l1oea7a7e67e-1304952114.tcloudbaseapp.com/sgb2.0/img/%E5%A4%B4%E5%83%8F.png" alt="点击微信头像登录" >-->

<!--    			<span id="nickname" class="float-right nickname"  aria-label="点击头像登录">点击头像登录</span>-->
<!--    		</div>-->


</footer>
</body>
</html>
<script>

    const layer = layui.layer
    const form =  layui.form
    const SGB = new sgb()
    SGB.init()

    wxSDK().then(res=>{
        SDKyanzheng(res).then(res=>{
            let title = document.title
            let url = location.href
            let imgUrl=$('#zhandianIcon').attr('href')
            let desc= '我的24 现场24 CH24'
            fenxiang(title,url,imgUrl,desc)
        })
    })

    function sgb(){
        return {
            data:[],
            seacherData:[],
            seacherRes:'',
            removeSeacherIsShow:false,
            seacherStatus:false,
            //音频请求的链接
            host:'http://od.qumei.com/sgb/dmt/ad/',
            navs:[
                // {title:'圣诞主题赞美',href:'#sj0',index:6},
                {title:'赞美耶稣诗集(附录)',href:'#sj0',index:0},
                {title:'赞美耶稣诗集',href:'#sj1',index:1},
                {title:'新编赞美诗',href:'#sj2',index:2},
                {title:'少儿赞美',href:'#sj3',index:3},
                {title:'默想音乐',href:'#sj4',index:4},
            ],
            //播放列表的ids
            gds:[],
            //要进到播放页面的页面链接
            gdUrl:'./play-list.html', //http://od.qumei.com/sgb/play-list.html
            locationZmitem: 'zmitem', //赞美item本地存储名称
            //当前的index
            activeIndex:0,
            async init(){

                const load = layer.load()
                this.resetNav()
                //匿名登录
                await anonymouslogin()
                //检查是否有更新的内容
                const versionBool = await this.editionUpdate()
                if(versionBool){
                    localStorage.removeItem(this.locationZmitem)
                }
                let zmitem = localStorage.getItem(this.locationZmitem)
                if(zmitem){
                    let items = JSON.parse(zmitem)
                    this.data = items
                    layer.close(load)
                    this.mescroll = this.newMescroll()
                    this.removeSeacher()

                }else{
                    this.initZmItem().then(res=>{
                        layer.close(load)
                        this.mescroll = this.newMescroll()
                        this.removeSeacher()
                    })
                }

            },
            play(id,t){
                if(id==0)return
                location.href = this.gdUrl+'?d='+id+'&t='+t+'&bz=我的24 现场24 CH24'
            },
            //版本更新和硬刷新列表模块及公告模块
            editionUpdate:async function(){
                // 调用数据 库版本控制器
                let res = await getSgbVersion()
                let edition = res['versoion']
                let localEdition = localStorage.getItem('edition')
                if(localEdition == undefined || localEdition !== edition){
                    localStorage.setItem('edition',edition)
                    //先关闭移动到菜单里面手动控制
                    layer.open({
                        type: 2,
                        content:'./HistoricalVersion.html', //这里content是一个普通的String
                        shadeClose:true,
                        title:'版本更新通知',
                        anim:0,
                        area:['80%','70%'],
                    });
                    return true
                }else{
                    return false
                }
            },
            //更新赞美列表
            initZmItem:async function (){
                let zmitemRes = await getZmItem()
                this.data = zmitemRes.data
                localStorage.setItem(this.locationZmitem,JSON.stringify(this.data))
                return zmitemRes.data
            },
            //重置列表
            resetList:function (items,seacherStr=null){
                let newItems = []
                if(seacherStr){
                    this.removeSeacherIsShow = true
                    $('.removeSeacher').show()
                   for(let i = 0 ; i <　items.length ; i++){
                       let item = items[i]
                       let name = item.xuhao+item.mulu
                       if(name.indexOf(seacherStr)!==-1){
                           newItems.push(item)
                       }
                   }
                   if(newItems.length==0){
                       newItems=[{"_id": 0,"isad": 0,"isopern": 0,"lyric": "","mulu": "没有搜索到相关内容","shijiIndex": 0,"xuhao":''}]
                   }
                   items = newItems
                }else{
                    this.removeSeacherIsShow = false
                    $('.removeSeacher').hide()
                }

                $('.list-group').html('')
                $(items).each(index=>{
                    let item = items[index]
                    let navs = this.navs
                    let $activeLi = ''
                    let sji = 'shijiIndex'
                    let $li = ''
                    if( index == 0 || item[sji] !== items[index-1][sji] ){
                        $activeLi =   ` <li class="list-group-item active">
                                            <h5 class="shijiC" id="${'sj'+item.shijiIndex}" >${navs[item.shijiIndex]['title']}</h5>
                                        </li>`
                    }

                    if(item.isupper){
                        $li = `${$activeLi}<li id="${item._id}" class="list-group-item">
                                    <a href="#" id="${item._id}" onclick="SGB.play('${item._id}','${item.xuhao+'.'+item.mulu}')">${item.xuhao+'.'+item.mulu}</a>
                                    ${item.isad?'<span class=\"badge\"><span class=\"iconfont icon-icon-\"></span></span>':''}
                                    ${item._id!==0?'<button data-id='+item._id+' class=\"pushGd btn btn-light btn-sm\" role=\"button\" aria-label=\"点击我将当前曲赞美目加入播单\" onclick=\"SGB.addList(event)\"><span class=\"iconfont icon-jia\" style=\"font-size:15px;\"></span></button>':''}
                                </li>`
                    }else {
                        $li = `${$activeLi}`
                    }
                    $('.list-group').append($li)
                })
                this.seacherRes = '共包含：'+items.length+'首'
                $('#ariaSeacher').text( this.seacherRes )
            },
            //清空搜索字符串并恢复列表
            removeSeacher:function (e){
                $("#seacherInput").val('')
                $('.removeSeacher').hide()
                // this.resetList(this.data)
                this.seacherStr=''
                this.toglNav(this.activeIndex)
            },
            //添加播单按钮点击事件
            addList:function(e){
                let target = e.currentTarget
                let id = target.dataset.id
                if(this.gds.length>=20){
                    alert("福杯满溢，最多20首哦！")
                    return
                }
                if(this.gds.includes(id)){
                    alert("本首赞美，已经在分享的播单内了哦！")
                    return
                }
                this.gds.push(id)
                if(this.gds.length>0){
                    $("#gdCount").show()
                    $("#bdCount").show()
                }else{
                    $("#gdCount").hide()
                    $("#bdCount").hide()
                }
                $("#gdCount").text(this.gds.length)
                $("#bdCount").text(this.gds.length)
                $("#gdFx").attr('data-href',this.gdUrl)
                $("#gdFx").attr('aria-label',"当前我的播单共加入"+this.gds.length+"条曲目")
            },
            //打开播单输入的弹窗
            bodanForm:function (e){
                let that = this
                if(this.gds.length<=0){
                    alert("播单是空的，请点击列表条目的”+“添加播单哦")
                    return
                }
                let $html = `<form class="layui-form p-2" >
                                  <div class="layui-form-item">
                                      <input type="text" name="t" placeholder="标题，可不填" autocomplete="off" class="layui-input" aria-label="显示一个表单弹窗,分享时显示的标题，可不填写">
                                  </div>
                                  <div class="layui-form-item layui-form-text">
                                      <textarea name="b" placeholder="说点什么吧...，内容将显示在分享卡片描述上，也可不填" class="layui-textarea" aria-label="分享时要加的文字内容，可不填写"></textarea>
                                  </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                          <button tabindex="0" class="layui-btn" lay-submit lay-filter="*" type="button" aria-label="点击我进入当前设置的播单">去播单</button>
                                          <button type="reset" class="layui-btn layui-btn-primary" aria-label="点击我重新设置填写的表单内容">重置</button>
                                        </div>
                                  </div>
                                </form>`
                layer.open({
                    type:1,
                    title:'播单设置',
                    content:$html,
                    shadeClose: true,
                    skin: 'yourclass'
                })
                $('input[name="t"]').focus()
                form.on('submit(*)',function(data){
                    let b = data.field.b == ""?"播单分享":data.field.b
                    let t = data.field.t == ""?"我的24 现场24 CH24":data.field.t
                    that.gdUrl += "?bz=" + b
                    that.gdUrl += "&t=" + t
                    that.gdUrl += "&d=" + that.gds.join(",")
                    window.location.href = that.gdUrl
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });
            },
            //渲染导航
            resetNav:function (){
                this.navs.forEach((item, index) => {
                    let $li = ''
                    if(index === 0){
                         $li = `<li><a onclick="SGB.toglNav(${item.index})" href="${item.href}">${item.title}</a></li>`
                    }else {
                         $li = `<li><a onclick="SGB.toglNav(${item.index})" href="${item.href}">${item.title}</a></li>`
                    }
                    $('.navbar-box ul').append($li)
                })


            },
            newMescroll : function(){
                const self = this
                const mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
                    //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
                    //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
                    down: {
                        use: false
                    },
                    up: {
                        callback: upCallback, //上拉加载的回调
                        //以下是一些常用的配置,当然不写也可以的.
                        page: {
                            num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                            size: 20 //每页数据条数,默认10
                        },
                        htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
                        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
                        // 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                        // 这就是为什么无更多数据有时候不显示的原因.
                        toTop: {
                            //回到顶部按钮
                            src: "../img/mescroll-totop.png", //图片路径,默认null,支持网络图
                            offset: 1000 //列表滚动1000px才显示回到顶部按钮
                        }
                    }
                });

                //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
                function upCallback(page) {
                    const pageNum = page.num; // 页码, 默认从1开始 如何修改从0开始 ?
                    const pageSize = page.size; // 页长, 默认每页10条
                    const data = self.getList(pageNum, pageSize) //获取列表和总数
                    self.setListData(data)
                    const currentPageLength = $('.list-group-item').length
                    let hasNext = true
                    if(currentPageLength >= data.total){
                        hasNext = false
                    }
                    mescroll.endSuccess($('.list-group-item').length, hasNext);

                }

                return mescroll
            },
            mescroll: null,
            setListData: function ({list,total}){
                const self = this
                list.forEach(item=>{
                    $li = `<li id="${item._id}" class="list-group-item">
                                    <a href="#" id="${item._id}" onclick="SGB.play('${item._id}','${item.xuhao+'.'+item.mulu}')">
                                        ${item.xuhao+'.'+item.mulu}
                                    </a>
                                    ${item.isad?'<span class=\"badge\"><span class=\"iconfont icon-icon-\"></span></span>':''}
                                    ${item._id!==0?'<button data-id='+item._id+' class=\"pushGd btn btn-light btn-sm\" role=\"button\" aria-label=\"点击我将当前曲赞美目加入播单\" onclick=\"SGB.addList(event)\"><span class=\"iconfont icon-jia\" style=\"font-size:15px;\"></span></button>':''}
                                    ${self.seacherStr!==''?'<span class="small text-info">'+ self.navs.filter(i=>i.index === item.shijiIndex)[0]['title'] +'</span>':''}
                            </li>`
                    $('.list-group').append($li)
                })

            },
            getList:function (pageNum,pageSize){
                let list = null
                if(this.seacherStr === ''){
                    list = this.data.filter(i=>i.shijiIndex === this.activeIndex && i.isupper)
                }else{
                    list = this.data.filter(i=>(i.xuhao + i.mulu).indexOf(this.seacherStr) > -1)
                }
                console.log(list);
                console.log(pageNum, pageSize);

                return {
                    total:list.length,
                    list: list.slice( (pageNum-1)* pageSize, (pageNum-1)* pageSize + pageSize)
                }
            },
            //切换导航
            toglNav:function (index) {
                this.activeIndex = index
                $('.list-group').html('')
                if(index!== 5){
                    if(this.seacherStr!==''){
                        this.removeSeacher()
                    }
                    this.mescroll.scrollTo( 0, 0 );
                    this.mescroll.resetUpScroll();
                }
            },
            //搜索
            seacher:function (str) {
                $('.removeSeacher').show()
                $('.list-group').html('')
                this.seacherStr = str
                this.mescroll.scrollTo( 0, 0 );
                this.mescroll.resetUpScroll()
            },
            seacherStr:'',
            // 设置通知弹窗 目前写死的
            openSeting:function() {
                let s = localStorage.getItem('setting')
                if(s == 3)return
                if(s == null)s=0
                localStorage.setItem('setting',parseInt(s) + 1)
                const html = `
                    <div style="
                        background-color:red;
                        border-radius: 20px;
                        width: 100%;height:100%;text-align:center;
                        display:flex;justify-content: center;align-items: center;flex-direction: column;
                        font-size:40px; color:#ffffff;font-weight: bolder;
                    ">

                      <div style="height:30px;line-height: 20px;font-size:20px;">圣诞主题赞美</div>
                      <div style="height:30px;line-height: 20px;">
                        <a
                            class="btn btn-warning mt-4"
                            href="https://www.top237.top/play-list.html?bz=%E6%92%AD%E5%8D%95%E5%88%86%E4%BA%AB&t=%E5%9C%A3%E8%AF%9E%E4%B8%BB%E9%A2%98%E8%B5%9E%E7%BE%8E&d=5b00f970605d87b30340f36d3703d313,5b00f970605d87b30340f3717296a5fa,5b00f970605d87b30340f37563ad36b1,5b00f970605d87b30340f38d109b32c9,5b00f970605d87b30340f3e678bc3ac2,5b00f970605d87b30340f4997e72d050,5b00f970605d87b30340f495750138ea,5b00f970605d87b30340f47d5dfc1c94,5b00f970605d87b30340f47b6fbdd4a3,5b00f970605d87b30340f46d2bcccc42"
                        >点击领取</a>
                      </div>
                      <div class="mt-5"><span class="layui-anim layui-anim-loop layui-anim-downbit">SETTING</span></div>
                      <div style="height: 20px; font-size:20px;" class="mt-1" class="layui-anim layui-anim-loop layui-anim-scale">宝座  超越时空  237光</div>
                      <div style="height: 20px; font-size:20px;" class="mt-1">形像 生气 生命力</div>
                      <div style="height: 20px; font-size:20px;" class="mt-1">我 业 CH</div>
                    </div>
                `
                //自定页
                layer.open({
                    type: 1,
                    skin: 'layui-layer-demo', //样式类名
                    closeBtn: 0, //不显示关闭按钮
                    anim: 2,
                    shadeClose: true, //开启遮罩关闭
                    content: html,
                    area: [260,340],
                    title: 0,
                });

            }
        }
    }

</script>
